/* Shake animation */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

/* Bounce animation */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* Wobble animation - 减小幅度版本 */
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-12%) rotate(-3deg);
  }
  30% {
    transform: translateX(10%) rotate(2deg);
  }
  45% {
    transform: translateX(-8%) rotate(-1.5deg);
  }
  60% {
    transform: translateX(5%) rotate(1deg);
  }
  75% {
    transform: translateX(-3%) rotate(-0.5deg);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Flip animation - 柔和版本 */
@keyframes flip {
  0% {
    transform: perspective(1000px) rotateY(0) scale(1);
    opacity: 1;
  }
  25% {
    transform: perspective(1000px) rotateY(45deg) scale(0.95);
  }
  50% {
    transform: perspective(1000px) rotateY(90deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: perspective(1000px) rotateY(135deg) scale(0.95);
  }
  100% {
    transform: perspective(1000px) rotateY(180deg) scale(1);
    opacity: 1;
  }
}

/* Jello animation */
@keyframes jello {
  0%,
  11.1%,
  100% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.shake-enter-active,
.shake-leave-active,
.bounce-enter-active,
.bounce-leave-active,
.wobble-enter-active,
.wobble-leave-active,
.pulse-enter-active,
.pulse-leave-active,
.flip-enter-active,
.flip-leave-active,
.jello-enter-active,
.jello-leave-active {
  transition: all 0.5s ease;
}

.shake-enter-from,
.shake-leave-to,
.bounce-enter-from,
.bounce-leave-to,
.wobble-enter-from,
.wobble-leave-to,
.pulse-enter-from,
.pulse-leave-to,
.flip-enter-from,
.flip-leave-to,
.jello-enter-from,
.jello-leave-to {
  opacity: 0;
}

.shake-enter-to,
.shake-leave-from {
  animation: shake 0.5s ease-in-out;
}
.bounce-enter-to,
.bounce-leave-from {
  animation: bounce 0.5s ease-in-out;
}
.wobble-enter-to,
.wobble-leave-from {
  animation: wobble 0.5s ease-in-out;
}
.pulse-enter-to,
.pulse-leave-from {
  animation: pulse 0.5s ease-in-out;
}
.flip-enter-to,
.flip-leave-from {
  animation: flip 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.jello-enter-to,
.jello-leave-from {
  animation: jello 0.5s ease-in-out;
}

.animation-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.animation-switcher button {
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.shake-enter-from,
.shake-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}

.shake-enter-to,
.shake-leave-from {
  opacity: 1;
  animation: shake 0.5s ease-in-out;
}
